<template>
	<view class="">
		
		<view class="" style="width: 100%;height: 100rpx;background-color: #fff;display: flex;">
			<view class="" style="padding: 10rpx;">
				选择分类
			</view>
			<view class="fenlei" @click="otherFenlei">
				<view class="">
					{{fenleiOneName}}
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#000" size="28"></u-icon>
				</view>
			</view>
			
			<view class="">
				<button @click="addshop">新增商品</button>
			</view>
			<view v-if="addShops == true" class="" style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;">
				<view class="" style="width: 600rpx;background-color: #fff;margin: 0 auto;margin-top: 100rpx;">
					<view class="" style="width: 600rpx;text-align: center;">
						新增商品
					</view>
					<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;">
						<view class="">
							商品名称
						</view>
						<view class="">
							<input v-model="shangName" style="width: 300rpx;border: 1rpx solid #000;" placeholder="请输入商品名称" type="text" />
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;">
						<view class="">
							商品描述
						</view>
						<view class="">
							<input v-model="shangMiaoShu" style="width: 300rpx;border: 1rpx solid #000;" placeholder="请输入商品名称" type="text" />
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;">
						<view class="">
							市 场 价
						</view>
						<view class="">
							<input v-model="shangShiPrice" style="width: 300rpx;border: 1rpx solid #000;" placeholder="请输入商品名称" type="text" />
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;">
						<view class="">
							折 扣 价
						</view>
						<view class="">
							<input v-model="shangZhePrice" style="width: 300rpx;border: 1rpx solid #000;" placeholder="请输入商品名称" type="text" />
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;">
						<view class="" style="margin-left: -30rpx;">
							是否优惠
						</view>
						<view class="">
							<u-radio-group
							    v-model="radiovalue1"
							    placement="row"
							    @change="groupChange"
							  >
							    <u-radio
							      :customStyle="{marginBottom: '8px'}"
							      v-for="(item, index) in radiolist1"
							      :key="index"
							      :label="item.name"
							      :name="item.name"
							      @change="radioChange"
							    >
							    </u-radio>
							  </u-radio-group
							</view>
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;">
						<view class="">
							商品标签
						</view>
						<view class="">
							<input v-model="shopBiaoqian" style="width: 300rpx;border: 1rpx solid #000;" placeholder="请输入商品名称" type="text" />
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-around;margin-top: 20rpx;">
						<view class="" style="margin-left: -50rpx;">
							商品图片
						</view>
						<view class="">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
								:previewFullImage="true" style="background-color: gray;" border></u-upload>
						</view>
					</view>
					
					
					<view class="" style="display: flex;justify-content: space-around;margin-top: 50rpx;">
						<view class="">
							<button @click="noAdd">取消</button>
						</view>
						<view class="">
							<button @click="yesAdd">确定</button>
						</view>
					</view>
					
					
					
				</view>
			</view>
			
			<view v-if="fenleiShows == true" class="" style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;">
				<view class="" style="width: 600rpx;background-color: #fff;margin: 0 auto;margin-top: 100rpx;">
					<view @click="xuanzeOk(item)" class="xuanzefenlei" v-for="(item,index) in fenleiList" :key="index">
						<view class="">
							{{item.title}}
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#000" size="28"></u-icon>
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		
		<view v-for="(item,index) in shopList" :key="index" class="" style="background-color: #ccc;padding: 20rpx;margin-top: 20rpx;">
			<view class="" style="display: flex;">
				<view class="">
					<image style="width: 150rpx;height: 150rpx;" :src="item.logo" mode=""></image>
				</view>
				<view class="" style="margin-left: 20rpx;">
					<view class="" style="font-size: 36rpx;font-weight: 900;">
						{{item.title}}
					</view>
					<view class="" style="margin-top: 18rpx;">
						价格: ￥{{item.discount_price}}
					</view>
				</view>
				
			</view>
			<view class="" style="display: flex;margin-top: 10rpx;justify-content: space-around;">
				<view @click="upShop(item)" class="" style="margin: 10rpx;width: 130rpx;height: 70rpx;text-align: center;line-height: 70rpx;background-color: #fff;">
					上架
				</view>
				<view @click="downShop(item)" class="" style="margin: 10rpx;width: 130rpx;height: 70rpx;text-align: center;line-height: 70rpx;background-color: #fff;">
					下架
				</view>
				<view @click="editShop(item)" class="" style="margin: 10rpx;width: 130rpx;height: 70rpx;text-align: center;line-height: 70rpx;background-color: #fff;">
					编辑
				</view>
				<view @click="deleShop(item)" class="" style="margin: 10rpx;width: 130rpx;height: 70rpx;text-align: center;line-height: 70rpx;background-color: #fff;">
					删除商品
				</view>
				<view v-if="item.status == 0" class="" style="margin: 10rpx;width: 130rpx;height: 70rpx;text-align: center;line-height: 70rpx;background-color: lightpink;">
					已下架
				</view>
				<view v-if="item.status == 1" class="" style="margin: 10rpx;width: 130rpx;height: 70rpx;text-align: center;line-height: 70rpx;background-color: lightpink;">
					上架中
				</view>
				
				
				<view v-if="editShow == true" class="" style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;">
					
					<view class="" style="width: 600rpx;background-color: #fff;margin: 0rpx auto;margin-top: 100rpx;">
						<view class="" style="width: 100%;text-align: center;">
							修改商品
						</view>
						<view class="" style="display: flex;justify-content: space-around;align-items: center;">
							<view class="">
								商品名称
							</view>
							<view class="">
								<input v-model="shopName" style="width: 400rpx;border: 1rpx solid #ccc;height: 50rpx;" type="text" placeholder="请输入商品名称" />
							</view>
						</view>
						
						<view class="" style="display: flex;justify-content: space-around;align-items: center;margin-top: 30rpx;">
							<view class="">
								商品价格
							</view>
							<view class="">
								<input v-model="shopPrice" style="width: 400rpx;border: 1rpx solid #ccc;height: 50rpx;" type="text" placeholder="请输入商品价格" />
							</view>
						</view>
						<view class="" style="display: flex;justify-content: space-around;align-items: center;margin-top: 30rpx;">
							<view class="">
								<button @click="noEdit">取消</button>
							</view>
							<view class="">
								<button @click="yesEdit">确定</button>
							</view>
						</view>
						
						
					</view>
					
					
				</view>
				
				
				
			</view>
			
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		onShow(){
			this.getShopStore()
			this.getFenlei()
		},
		onLoad() {
			this.getFenlei()
			// uni.setStorageSync('fenleiOneId',this.fenleiOneId)
		},
		data(){
			return {
				shopList:[],
				shopName:'',
				shopPrice:'',
				shopId:'',
				editShow:false,
				fenleiList:[],
				fenleiOneName:'',
				fenleiOneId:'',
				fenleiShows:false,
				addFenleiId:'',
				addShops:false,
				radiolist1: [{
					name: '优惠',
					disabled: false
				  },
					{
					  name: '不优惠',
					  disabled: false
					},
					
				  ],
				discount:'',  // 优惠
				fileList1: [],
				image:'',
				shangName:'',
				shangMiaoShu:'',
				shangShiPrice:'',
				shangZhePrice:'',
				shopBiaoqian:'',
				
				
				
				
			}
		},
		methods:{
			// storeShops
			getShopStore(){
				this.$req('GET',this.$api.storeShops,{
					store_id:uni.getStorageSync('storId')
				}).then(res =>{
					console.log(res,'查看我的商品')
					this.shopList = res.data.data
				})
			},
			upShop(item){
				console.log(item,'查看item')
				this.$req('POST',this.$api.editShop,{
					id:item.id,
					status:1
				}).then(res =>{
					console.log(res,'打印res查看是什么东西')
					
					if(res.status == 200){
						uni.$u.toast('上架成功')
						this.getShopStore()
					}else{
						uni.$u.toast('上架失败')
					}
					
				})
			},
			downShop(item){
				console.log(item,'查看item')
				this.$req('POST',this.$api.editShop,{
					id:item.id,
					status:0
				}).then(res =>{
					console.log(res,'打印res查看是什么东西')
					// uni.$u.toast('下架成功')
					if(res.status == 200){
						uni.$u.toast('下架成功')
						this.getShopStore()
					}else{
						uni.$u.toast('下架失败')
					}
					
				})
			},
			editShop(item){
				this.shopId = item.id
				this.editShow  = true
			},
			noEdit(){
				this.editShow = false
			},
			yesEdit(){
				this.$req('POST',this.$api.editShop,{
					id:this.shopId,
					title:this.shopName,
					discount_price:this.shopPrice
				}).then(res =>{
					console.log(res,'打印res查看是什么东西')
					if(res.status == 200){
						uni.$u.toast('修改成功')
						this.getShopStore()
						this.editShow = false
					}else{
						uni.$u.toast('修改失败')
						this.getShopStore()
						this.editShow = false
					}
				})
			},
			// 获取分类列表
			getFenlei(){
				this.$req('GET',this.$api.getCate,{
					shop_id:uni.getStorageSync('storId'),
				}).then(res =>{
					console.log(res,'查看获取到分类没有')
					if(res.status == 200){
						this.fenleiList = res.data
						this.fenleiOneName = this.fenleiList[0].title
						this.fenleiOneId = this.fenleiList[0].id
						uni.setStorageSync('fenleiOneId',this.fenleiOneId)
					}
					
				})
			},
			otherFenlei(){
				this.fenleiShows = true
			},
			xuanzeOk(item){
				// console.log(item,'查看这个item是什么打印一下')
				// uni.setStorageSync('fenleiTitleId',item.id)
				uni.setStorageSync('fenleiOneId',item.id)
				
				this.fenleiOneName = item.title
					this.$req('GET',this.$api.storeShops,{
						store_id:uni.getStorageSync('storId'),
						cate_id:uni.getStorageSync('fenleiOneId'),
					}).then(res =>{
						console.log(res,'查看我的商品')
						this.shopList = res.data.data
						this.fenleiShows = false
					})
			},
			addshop(){
				
				this.addShops = true
				
			},
			noAdd(){
				this.addShops = false
			},
			yesAdd(){
				this.$req('POST',this.$api.addShops,{
					cate_id:uni.getStorageSync('fenleiOneId'),
					title:this.shangName,
					logo:this.image,
					images:this.image,
					describe:this.shangMiaoShu,
					market_price:this.shangShiPrice,
					discount_price:this.shangZhePrice,
					store_id:uni.getStorageSync('storId'),
					is_discount:this.discount,
					label:this.shopBiaoqian,
					school_id:uni.getStorageSync('addressId')
				}).then(res =>{
					console.log(res,'查看这个res是什么')
					if(res.status == 200){
						uni.$u.toast('添加成功')
						this.$req('GET',this.$api.storeShops,{
							store_id:uni.getStorageSync('storId'),
							cate_id:uni.getStorageSync('fenleiOneId'),
						}).then(res =>{
							console.log(res,'查看我的商品')
							this.shopList = res.data.data
							this.fenleiShows = false
						})
						this.addShops = false
					}else{
						uni.$u.toast('添加失败')
						this.$req('GET',this.$api.storeShops,{
							store_id:uni.getStorageSync('storId'),
							cate_id:uni.getStorageSync('fenleiOneId'),
						}).then(res =>{
							console.log(res,'查看我的商品')
							this.shopList = res.data.data
							this.fenleiShows = false
						})
						this.addShops = false
					}
					
				})
			},
			groupChange(n) {
			   console.log('groupChange', n);
			   if (n === '优惠') {
				   this.discount = 1
			     } else if (n === '不优惠') {
				   this.discount = 0
			     }
			},
			 radioChange(n) {
				console.log('radioChange', n);
				if (n === '优惠') {
					this.discount = 1
				  } else if (n === '不优惠') {
					this.discount = 0
				  }
			  },
			  uploadFilePromise(url) {
			  	return new Promise((resolve, reject) => {
			  		let a = uni.uploadFile({
			  			url: 'https://hwy062.qdytcy.cn/api/user/upload', // 仅为示例，非真实的接口地址
			  			filePath: url,
			  			name: 'file',
			  			formData: {
			  				user: 'test'
			  			},
			  			success: (res) => {
			  				console.log(res.data, "888")
			  				setTimeout(() => {
			  					let data = JSON.parse(res.data);
			  					console.log(data.url, "88899")
			  					let imageUrl = `${data.data.url}`; // 前面可跟域名
			  					// imageUrl = imageUrl.replace(/\\/g, '/');
			  					resolve(imageUrl);
			  					console.log(imageUrl, "9900")
			  				}, 1000)
			  			}
			  		});
			  	})
			  },
			  // 删除图片
			  deletePic(event) {
			  	this[`fileList${event.name}`].splice(event.index, 1)
			  },
			  async afterRead(event) {
			  	let lists = [].concat(event.file)
			  	let fileListLen = this[`fileList${event.name}`].length
			  	lists.map((item) => {
			  		this[`fileList${event.name}`].push({
			  			...item,
			  			status: 'uploading',
			  			message: '上传中'
			  		})
			  	})
			  	for (let i = 0; i < lists.length; i++) {
			  		const result = await this.uploadFilePromise(lists[i].url)
			  		let item = this[`fileList${event.name}`][fileListLen]
			  		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			  			status: 'success',
			  			message: '',
			  			url: result
			  		}))
			  		// this.image.push(result)
			  		this.image = result
			  		console.log(this.image, 'cunqilaide')
			  		fileListLen++
			  	}
			  },
			deleShop(item){
				// 删除商品  deleteShop
				console.log(item,'查看点击删除的是哪个')
				this.$req('POST',this.$api.deleteShop,{
					id:item.id
				}).then(res =>{
					console.log(res,'查看删除了没有')
					if(res.status == 200){
						uni.$u.toast('删除成功')
						this.fenleiOneName = item.title
							this.$req('GET',this.$api.storeShops,{
								store_id:uni.getStorageSync('storId'),
								cate_id:uni.getStorageSync('fenleiOneId'),
							}).then(res =>{
								console.log(res,'查看我的商品')
								this.shopList = res.data.data
								this.fenleiShows = false
							})
					}else{
						uni.$u.toast('删除失败')
						this.fenleiOneName = item.title
							this.$req('GET',this.$api.storeShops,{
								store_id:uni.getStorageSync('storId'),
								cate_id:uni.getStorageSync('fenleiOneId'),
							}).then(res =>{
								console.log(res,'查看我的商品')
								this.shopList = res.data.data
								this.fenleiShows = false
							})
					}
				})
			}
		}
	}
	
	
</script>

<style>
	page {
		background: #f6f5f7;
	}
	
	.fenlei{
		width: 400rpx;
		height: 100rpx;
		margin: 0 auto;
		background-color: #fff;
		text-align: center;
		line-height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.xuanzefenlei{
		display: flex;
		width: 100%;
		height: 80rpx;
		align-items: center;
		border-bottom: 1rpx solid #000;
		justify-content: space-between;
	}
	
	
	
	
	
</style>